// 导入outlet组件 useNavigate
import { Outlet, useNavigate, useLocation } from "react-router-dom";
// 导入react和useState
import React, { useState,useEffect } from "react";
// 导入接口getTopNav
import { getTopNav,getLeftNav } from "../../api/admin";
// 导入样式
import "../../assets/style/admin.scss";
//#region
// 导入redux里的useSelector()方法
import {setUserInfo } from "../../store/authSlice";
import { useSelector,useDispatch } from "react-redux";
// 导入自定义的类型定义
import type { Dispatch,State } from "../../store";
//#endregion
// -------------------------------------------
import { LaptopOutlined, NotificationOutlined, UserOutlined ,MenuFoldOutlined} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Sider } = Layout;
// 导入切片里的方法
import { getMenuOne, getMenuTwo } from "../../store/authSlice";
// ----------        AdminView          ---------------------------------
const AdminView: React.FC = () => {
// 定义数据State  --------------------------------------------------------------------------- 
const dispatch:any = useDispatch();
const [Oneall, useOneall] = useState();
// 子级导航收起与关闭
const [isleft,setIsleft] = useState(false)
// 二级菜单标题
const [title,setTitle] = useState("")
// 定义dispatch变量，用来触发action
const leftOneList = useSelector((state:any)=>state.auth.leftOneList)
const leftTwoList = useSelector((state:any)=>state.auth.leftTwoList)
// 定义navigate
const navigate = useNavigate();
// 定义数据State  --------------------------------------------------------------------------- 
// 自定义事件-------------------------------------------------------------------------------------
  // 进行排序小到大
const sort = (list: any)=> {
  for (var i = 0; i < list.length - 1; i++) {
      for(var j = 0; j < list.length - i - 1; j++) {
          if (Number(list[j].seq) > Number(list[j + 1].seq)) {
              var tmp = list[j];
              list[j] = list[j + 1];
              list[j + 1] = tmp;
          }
      }
  }
  return list
}
// 一级菜单点击事件
const OneClick = (item:any)=>{
  // 显示二级菜单
  setIsleft(true)
  // 获取选中的一级菜单并修改成二级菜单的标题
  setTitle(item.domEvent.target.innerText)
  const list:any = Oneall;
  // 一级菜单的name一致的数据展示，再把二级菜单数据传入redux仓库切片
  list.forEach((obj: any) => {
    // 比较name
    if (obj.name === item.domEvent.target.innerText) {
      // 传入仓库切片
      dispatch(getMenuTwo(obj.childs));
    }
  });
}
// 获取导航菜单数据
const getLeftNavList = ()=>{
  getLeftNav()
  .then(res=>{
    if (res.status === 200) {
      // 进行排序
      var obj = sort(res.data.data)
      // 数据传到redux仓库
      dispatch(getMenuOne(obj));
      // 数据存入state
      useOneall(obj)
    }
  })
}
// 二级菜单跳转事件
const  TwoRouter = (key:any)=>{
  // key.key : /#/pages/common/enterCommunity
  navigate(key.key.slice(2).split(".")[0])
}

// 首頁跳转事件
const HomeRouter = ()=>{
  // 跳转首页
  navigate("/pages/home")
  // 隐藏二级菜单
  setIsleft(false)
}
// 自定义事件-------------------------------------------------------------------------------------



// useEffect ----------------------------------------------------------------------------------
  useEffect(()=>{
    getLeftNavList();
  },[])
// useEffect ----------------------------------------------------------------------------------


  
  // 菜单处理  -------------------------------------------// -------------------------------------------// -------------------------------------------// -------------------------------------------
  // 顶部导航菜单
  const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
    key,
    label: `nav ${key}`,
  }));

  // 菜单处理   -------------------------------------------// -------------------------------------------// -------------------------------------------// -------------------------------------------


  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <div className="admin">
      <Layout>
        {/* 顶部导航菜单 */}
        <Header className="header">
          <div className="logo">
            HC
          </div>
          <ul>
            <li onClick={ HomeRouter }>首页</li>
            <li>业务受理</li>
            <li>常用菜单</li>
            <li>设置</li>
          </ul>
        </Header>
        {/* 右侧导航菜单 */}
        <Layout>
            <Sider width={80} style={{ background: colorBgContainer }}>
              {/* 父导航栏 */}
              <Menu
              onClick={OneClick}
                mode="inline"
                defaultSelectedKeys={["1"]}
                defaultOpenKeys={["sub1"]}
                style={{ height: "100%", borderRight: 10,backgroundColor:"#1f2339",color:"#838a9b" }}
                items={leftOneList}
              />
            </Sider>
{/* "TwoRouter" */}
            <div className={isleft ? "TwoRouter" : "TwoRouter TwoRouterShow"} >
              <h3>
                {title}
              </h3>
              <Sider width={120} style={{ background: colorBgContainer }}>
                  <Menu
                  onClick={TwoRouter}
                    mode="inline"
                    theme="dark"
                    items={leftTwoList}
                  />
              </Sider>
              <div className="icon">
                <MenuFoldOutlined onClick={()=>setIsleft(false)}/>
              </div>
            </div>
          {/* 右侧内容 */}
          <Layout style={{ padding: "0 20px 20px" }}>


            {/* 内容 */}
            <Content
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background: colorBgContainer
              }}
            >
              {/*  */}
             <Outlet />
             {/*  */}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
}

export default AdminView;